<template>
    <div class=''>
        <el-dialog title="登录" center :visible.sync="$store.state.loginVisible" width="30%">
            <el-form status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="from.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="from.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="$store.state.loginVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
   
<script>
import { login } from '@/api/user'
export default {
    name: 'Login',
    data() {
        return {
            from: {
                username: "",
                password: ""
            }
        }
    },
    created() {
        // console.log('------created--------');
    },
    methods: {
        submit() {
            login(this.from).then(res => {
                this.$store.state.user = res.data
                this.$store.state.loginVisible = false
                this.$message.success("登录成功")
            }).catch(error => {
                this.$message.error(error.message)
            })
        },
    },
}
</script>
   
<style scoped></style>